<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="
      baTable.form.operate &&
      baTable.form.operate !== 'origin' &&
      baTable.form.operate !== 'upload'
    "
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="realSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item label="设备品牌" prop="brand">
            <el-input
              v-model="baTable.form.items!.brand"
              placeholder="请输入设备品牌"
            />
          </el-form-item>
          <el-form-item label="设备名称" prop="modelName">
            <el-input
              v-model="baTable.form.items!.modelName"
              placeholder="请输入设备名称"
            />
          </el-form-item>
          <el-form-item label="设备型号" prop="modelCode">
            <el-input
              v-model="baTable.form.items!.modelCode"
              placeholder="请录入设备型号"
            />
          </el-form-item>
          <!-- <el-form-item label="净化率(%)" prop="rate">
              <el-input
                v-model="baTable.form.items!.rate"
                placeholder="请输入净化率"
              />
            </el-form-item>
            <el-form-item label="电场数量" prop="electricfield">
              <el-input
                v-model="baTable.form.items!.electricfield"
                placeholder="请输入电场数量"
              />
            </el-form-item> -->
          <!-- <el-form-item label="风机全压(Pa)" prop="fanPressure">
              <el-input
                v-model="baTable.form.items!.fanPressure"
                placeholder="请输入风机全压(Pa)"
              />
            </el-form-item> -->
          <!-- <el-form-item label="风管流速(m/s)" prop="flowRate">
              <el-input
                v-model="baTable.form.items!.flowRate"
                placeholder="请输入风管流速(m/s)"
              />
            </el-form-item>
            <el-form-item label="建议最小管道截面积" prop="sectionalArea">
              <el-input
                v-model="baTable.form.items!.sectionalArea"
                placeholder="请输入建议最小管道截面积"
                disabled
              />
            </el-form-item> -->
          <!-- <el-form-item label="额定功率" prop="power">
            <el-input
              v-model="baTable.form.items!.power"
              placeholder="请输入额定功率"
            />
          </el-form-item> -->
          <el-form-item label="设备图片">
            <el-upload
              ref="uploadRef"
              v-model:file-list="fileList"
              :headers="headerConfig"
              list-type="picture-card"
              :limit="1"
              name="avatarfile"
              :on-change="changUpload"
              :on-remove="handleRemove"
              :auto-upload="false"
              :http-request="handleUplodFile"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <div class="imgBox" style="margin-left: 10px">
              <el-image
                style="width: 148px; height: 148px"
                :src="baTable.form.items!.pic"
                fit="fill"
                :preview-src-list="[ baTable.form.items!.pic]"
              />
            </div>
          </el-form-item>
          <el-form-item label="说明书">
            <el-upload
              ref="uploadPdfRef"
              :limit="1"
              accept=".doc,.docx,.xlsx,.pdf,.jpg,.png,.jpeg"
              class="upload-demo"
              :action="state.fileAction1"
              :auto-upload="false"
              :on-change="changUploadPdf"
              :on-remove="handleRemovePdf"
              :http-request="handleUplodFilePdf"
            >
              <el-button type="primary">上传本地文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持doc、docx、xlsx、pdf 、jpg等常见文件格式，大小不超过5MB
                </div>
              </template>
            </el-upload>
            <el-link
              @click="equipSpecifications(baTable.form.items!.information)"
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              >{{ baTable.form.items!.informationname }}</el-link
            >
          </el-form-item>
          <el-form-item label="CEP证书">
            <el-upload
              ref="uploaCepfRef"
              :limit="1"
              accept=".doc,.docx,.xlsx,.pdf,.jpg,.png,.jpeg"
              class="upload-demo"
              :action="state.fileAction2"
              :auto-upload="false"
              :on-change="changUploadCep"
              :on-remove="handleRemoveCep"
              :http-request="handleUplodFileCep"
            >
              <el-button type="primary">上传本地文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持doc、docx、xlsx、pdf 、jpg等常见文件格式，大小不超过5MB
                </div>
              </template>
            </el-upload>
            <div class="imgBox">
              <el-image
                style="width: 100px; height: 100px"
                :src="baTable.form.items!.certificate"
                fit="fill"
                :preview-src-list="[ baTable.form.items!.certificate]"
              />
              <el-link
                @click="equipSpecifications(baTable.form.items!.certificate)"
                type="primary"
                :underline="false"
                style="vertical-align: baseline"
                >CEP证书:{{ baTable.form.items!.certificatename }}</el-link
              >
            </div>
          </el-form-item>
          <el-form-item label="检测报告">
            <el-upload
              ref="uploaReportfRef"
              :limit="1"
              accept=".doc,.docx,.xlsx,.pdf,.jpg,.png,.jpeg"
              class="upload-demo"
              :action="state.fileAction3"
              :auto-upload="false"
              :on-change="changUploadReport"
              :on-remove="handleRemoveReport"
              :http-request="handleUplodFileReport"
            >
              <el-button type="primary">上传本地文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持doc、docx、xlsx、pdf 、jpg等常见文件格式，大小不超过5MB
                </div>
              </template>
            </el-upload>
            <div class="imgBox">
              <el-image
                style="width: 100px; height: 100px"
                :src="baTable.form.items!.report"
                fit="fill"
                :preview-src-list="[ baTable.form.items!.report]"
              />
              <el-link
                type="primary"
                :underline="false"
                style="vertical-align: baseline"
                @click="equipSpecifications(baTable.form.items!.report)"
                >CEP证书:{{ baTable.form.items!.reportname }}</el-link
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="realSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "add" ? "保存并添加下一项" : "保存" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted, computed, watch } from "vue";
import type baTableClass from "@/utils/baTable";
import type {
  ElForm,
  FormRules,
  ElTree,
  UploadFile,
  UploadFiles,
  UploadProgressEvent,
  FormInstance,
} from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import { getRegionName } from "@/utils/common";
import { _download, _upload } from "@/utils/axios";
import { getPointByAddress } from "vue-baidu-map-3x"; //baidu-map组件red
import { useBusiness } from "@/store/backend/BusinessM/info";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useAccessPoint } from "@/store/backend/AccessPointM/accessPoint";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type {
  UploadProps,
  UploadUserFile,
  UploadInstance,
  UploadRequestOptions,
} from "element-plus";
import { ElNotification } from "element-plus"; //处理导航信息

type Option = {
  id: number;
  label: string;
  children: Option[];
};

//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const bomRoute = inject("bomRoute") as any;
const formRef = ref<InstanceType<typeof ElForm>>();
const business = useBusiness();
const config = useConfig();
const dictionary = useDictionary();
const accessPoint = useAccessPoint();
const { proxy } = useCurrentInstance();
const uploadRef = ref<UploadInstance>();
const uploadPdfRef = ref<UploadInstance>();
const uploaCepfRef = ref<UploadInstance>();
const uploaReportfRef = ref<UploadInstance>();

const state: {
  form: anyObj;
  fileAction1: string;
  fileAction2: string;
  fileAction3: string;
  host: string;
} = reactive({
  form: {
    brand: "",
    certificate: "",
    electricfield: "",
    information: "",
    name: "",
    pic: "",
    power: "",
    rate: "",
    report: "",
    type: "",
    volume: "",
    // fanPressure: "",
    flowRate: "",
    sectionalArea: "",
  },
  fileAction1: "", //上传pdf文件的服务器地址
  fileAction2: "",
  fileAction3: "",
  host: "",
});

// 设备图片
const fileList = ref<UploadUserFile[]>([]);
const realUploadFile = ref<UploadUserFile[]>([]);
//CEP证书图片
const cepFileList = ref<UploadUserFile[]>([]);
const cepRealUploadFile = ref<UploadUserFile[]>([]);
//检测报告图片
const reportFileList = ref<UploadUserFile[]>([]);
const reportRealUploadFile = ref<UploadUserFile[]>([]);
//说明书pdf
const pdfFileList = ref<UploadUserFile[]>([]);
const pdfRealUploadFile = ref<UploadUserFile[]>([]);

const headerConfig = {
  Authorization: JSON.parse(localStorage.getItem("adminInfo") as any)?.token,
};
//移除设备图片
const handleRemove: UploadProps["onRemove"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log(uploadFile, uploadFiles);
  const { uid } = uploadFile;
  const selectFileList = fileList.value.filter((item) => {
    return item.uid != uid;
  });
  fileList.value = selectFileList;
};
//设备图片文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changUpload: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log("文件限制", uploadFile, uploadFiles[0].raw);
  const { uid, name, size } = uploadFile;
  //   文件类型限制
  const fileTypeFlag = /^.png|.jpg|.jpeg$/.test(
    name.substring(name.lastIndexOf(".")).toLowerCase()
  );
  if (!fileTypeFlag) {
    ElNotification({
      type: "warning",
      message: "文件类型只能是.png|.jpg|.jpeg",
    });
    const selectFileList = fileList.value.filter((item) => {
      return item.uid != uid;
    });
    fileList.value = selectFileList;
    return;
  }
  //文件大小进行校验
  if ((size as number) > 1024 * 1024 * 5) {
    ElNotification({
      type: "warning",
      message: "文件大小不能超过5Mb",
    });
    const selectFileList = fileList.value.filter((item) => {
      return item.uid != uid;
    });
    fileList.value = selectFileList;
    return;
  }
  //将上传的设备图片信息存入列表
  fileList.value.push(uploadFile);
  realUploadFile.value = [];
  let formData = new FormData();
  formData.append("file", uploadFiles[0].raw as any); //添加文件对象
  formData.append("name", "pic");
  _upload("/common/upload", formData, "").then((res: any) => {
    console.log("将上传的设备图片信息存入列表", res);
    // baTable.form.items!.pic = res.data.url;
    baTable.form.items!.pic =
      state.host === "" ? res.data.url : state.host + res.data.fileName;
  });
};
//允许自行实现上传文件的请求 再用户触发了realSubmit后触发
const handleUplodFile = (options: UploadRequestOptions) => {
  console.log("允许自行实现上传文件的请求", options);
  realUploadFile.value.push(options.file);
  let formData = new FormData();
  formData.append("file", options.file); //添加文件对象
  formData.append("name", "pic");
  // _upload("/common/upload", formData, "").then((res: any) => {
  //   state.form.pic = res.data.url;
  //   //上传完设备图片再上传pdf
  //   uploadPdfRef.value!.submit();
  // });
};

//移除说明书pdf
const handleRemovePdf: UploadProps["onRemove"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log(uploadFile, uploadFiles);
  const { uid } = uploadFile;
  const selectFileList = pdfFileList.value.filter((item) => {
    return item.uid != uid;
  });
  pdfFileList.value = selectFileList;
};
//设备说明书pdf文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changUploadPdf: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log("文件限制", uploadFile, uploadFiles);
  const { uid, name, size } = uploadFile;
  //   文件类型限制
  const fileTypeFlag = /^.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png$/.test(
    name.substring(name.lastIndexOf(".")).toLowerCase()
  );
  if (!fileTypeFlag) {
    ElNotification({
      type: "warning",
      message: "文件类型只能是.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png",
    });
    const selectFileList = pdfFileList.value.filter((item) => {
      return item.uid != uid;
    });
    pdfFileList.value = selectFileList;
    return;
  }
  //文件大小进行校验
  if ((size as number) > 1024 * 1024 * 5) {
    ElNotification({
      type: "warning",
      message: "文件大小不能超过5Mb",
    });
    const selectFileList = pdfFileList.value.filter((item) => {
      return item.uid != uid;
    });
    pdfFileList.value = selectFileList;
    return;
  }
  // 将上传PDF说明书文件信息存入列表
  pdfFileList.value.push(uploadFile);
  pdfRealUploadFile.value = [];
  let formData = new FormData();
  formData.append("file", uploadFiles[0].raw as any); //添加文件对象
  formData.append("name", "pdf"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    // baTable.form.items!.information = res.data.url;
    baTable.form.items!.information =
      state.host === "" ? res.data.url : state.host + res.data.fileName;
    baTable.form.items!.informationname = res.data.originalFilename;
  });
};
//允许自行实现上传文件的请求 再用户触发了realSubmit后触发
const handleUplodFilePdf = (options: UploadRequestOptions) => {
  console.log("允许自行实现上传文件的请求", options);
  pdfRealUploadFile.value.push(options.file);
  let formData = new FormData();
  formData.append("file", options.file); //添加文件对象
  formData.append("name", "pdf"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    state.form.information = res.data.url;
    //再上传cep图片
    uploaCepfRef.value!.submit();
  });
};

//移除CEP证书
const handleRemoveCep: UploadProps["onRemove"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log(uploadFile, uploadFiles);
  const { uid } = uploadFile;
  const selectFileList = cepFileList.value.filter((item) => {
    return item.uid != uid;
  });
  cepFileList.value = selectFileList;
};
//设备CEP证书文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changUploadCep: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log("文件限制", uploadFile, uploadFiles);
  const { uid, name, size } = uploadFile;
  //   文件类型限制
  const fileTypeFlag = /^.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png$/.test(
    name.substring(name.lastIndexOf(".")).toLowerCase()
  );
  if (!fileTypeFlag) {
    ElNotification({
      type: "warning",
      message: "文件类型只能是.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png",
    });
    const selectFileList = cepFileList.value.filter((item) => {
      return item.uid != uid;
    });
    cepFileList.value = selectFileList;
    return;
  }
  //文件大小进行校验
  if ((size as number) > 1024 * 1024 * 5) {
    ElNotification({
      type: "warning",
      message: "文件大小不能超过5Mb",
    });
    const selectFileList = cepFileList.value.filter((item) => {
      return item.uid != uid;
    });
    cepFileList.value = selectFileList;
    return;
  }
  //将上传的cep证书图片存入列表
  cepFileList.value.push(uploadFile);
  cepRealUploadFile.value = [];
  let formData = new FormData();
  formData.append("file", uploadFiles[0].raw as any); //添加文件对象
  formData.append("name", "cep"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    // baTable.form.items!.certificate = res.data.url;
    baTable.form.items!.certificate =
      state.host === "" ? res.data.url : state.host + res.data.fileName;
    console.log("上传的cep证书图片", baTable.form.items!.certificate);

    baTable.form.items!.certificatename = res.data.originalFilename;
  });
};
//允许自行实现上传文件的请求 再用户触发了realSubmit后触发
const handleUplodFileCep = (options: UploadRequestOptions) => {
  console.log("允许自行实现上传文件的请求", options);
  cepRealUploadFile.value.push(options.file);
  let formData = new FormData();
  formData.append("file", options.file); //添加文件对象
  formData.append("name", "cep"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    state.form.certificate =
      state.host === "" ? res.data.url : state.host + res.data.fileName;
    //再上传检测报告图片
    uploaReportfRef.value!.submit();
  });
};

//移除检测报告
const handleRemoveReport: UploadProps["onRemove"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log(uploadFile, uploadFiles);
  const { uid } = uploadFile;
  const selectFileList = reportFileList.value.filter((item) => {
    return item.uid != uid;
  });
  reportFileList.value = selectFileList;
};

//设备检测报告文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changUploadReport: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log("文件限制", uploadFile, uploadFiles);
  const { uid, name, size } = uploadFile;
  //   文件类型限制
  const fileTypeFlag = /^.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png$/.test(
    name.substring(name.lastIndexOf(".")).toLowerCase()
  );
  if (!fileTypeFlag) {
    ElNotification({
      type: "warning",
      message: "文件类型只能是.doc|.docx|.xlsx|.pdf|.jpg|.jpeg|.png",
    });
    const selectFileList = reportFileList.value.filter((item) => {
      return item.uid != uid;
    });
    reportFileList.value = selectFileList;
    return;
  }
  //文件大小进行校验
  if ((size as number) > 1024 * 1024 * 5) {
    ElNotification({
      type: "warning",
      message: "文件大小不能超过5Mb",
    });
    const selectFileList = reportFileList.value.filter((item) => {
      return item.uid != uid;
    });
    reportFileList.value = selectFileList;
    return;
  }
  //将上传检测报告图片信息存入列表
  reportFileList.value.push(uploadFile);
  reportRealUploadFile.value = [];
  let formData = new FormData();
  formData.append("file", uploadFiles[0].raw as any); //添加文件对象
  formData.append("name", "report"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    // baTable.form.items!.report = res.data.url;
    baTable.form.items!.report =
      state.host === "" ? res.data.url : state.host + res.data.fileName;
    baTable.form.items!.reportname = res.data.originalFilename;
  });
};
//允许自行实现上传文件的请求 再用户触发了realSubmit后触发
const handleUplodFileReport = (options: UploadRequestOptions) => {
  console.log("允许自行实现上传文件的请求", options);
  reportRealUploadFile.value.push(options.file);
  let formData = new FormData();
  formData.append("file", options.file); //添加文件对象
  formData.append("name", "report"); //添加文件对象
  _upload("/common/upload", formData, "").then((res: any) => {
    state.form.report = res.data.url;
    //再上传整个上传表单
    baTable.onSubmit(formRef.value);
  });
};
// const processChange = (val: any) => {
//   console.log(baTable.form.items!.process);
// };
// const filterText = ref("");
// const filterTextIOT = ref(""); //网关
// const filterNode = (value: string, data: any) => {
//   console.log(value, data);

//   if (!value) return true;
//   return data.name.includes(value);
// };

//规则
const rules = reactive<FormRules>({
  modelName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
  modelCode: [{ required: true, message: "设备型号不能为空", trigger: "blur" }],
  volume: [
    { required: true, message: "风量不能为空", trigger: "blur" },
    // {
    //   validator: function (rule, value, callback) {
    //     // const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/;中英文
    //     const title = /^[0-9]+$/;
    //     if (!title.test(value)) {
    //       callback(new Error("只能输入数字"));
    //     } else {
    //       callback();
    //     }
    //   },
    //   trigger: "blur",
    // },
  ],
  rate: [{ required: true, message: "净化率不能为空", trigger: "blur" }],
  electricfield: [
    { required: true, message: "电场数量不能为空", trigger: "blur" },
  ],
  power: [{ required: true, message: "额定功率不能为空", trigger: "blur" }],
  // fanPressure: [
  //   { required: true, message: "风机全压(Pa)不能为空", trigger: "blur" },
  // ],
  // flowRate: [
  //   { required: true, message: "风管流速(m/s)不能为空", trigger: "blur" },
  // ],
  // sectionalArea: [
  //   { required: true, message: "建议最小管道截面积不能为空", trigger: "blur" },
  // ],
});

//计算风管流速
// const changeSectionalArea = (event: any) => {
//   console.log("计算风管流速", event.target.value);
//   baTable.form.items!.sectionalArea = (event.target.value / 3600 / 12).toFixed(
//     2
//   );
// };

const equipSpecifications = (url: any) => {
  window.open(url);
};
//提交表单
const realSubmit = (formEl: FormInstance | undefined) => {
  baTable.onSubmit(formRef.value);
};

//针对侧边栏菜单高度让滚动条自适应
const overviewMenusScrollbarHeight = computed(() => {
  // 加上了50px的头部距离
  let menuTopBarHeight = 50;
  if (config.layout.layoutMode == "Default") {
    //32为aside上下margin
    return "calc(100vh - " + (172 + menuTopBarHeight) + "px)";
  } else {
    return "calc(100vh - " + (140 + menuTopBarHeight) + "px)";
  }
});
//地址转换为坐标 北京市海淀区上地十街10号
const pointAndAddress = () => {
  getPointByAddress(
    {
      address: baTable.form.items!.addr,
    },
    ["wZcU7ugfOpZLuuRTAvNPn3Y36rpFxp1Q"]
  )
    .then((res) => {
      let { location, formatted_address } = res as any;
      baTable.form.items!.coordinate = JSON.stringify(location);
    })
    .catch((err: any) => {
      console.log(err);
      ElNotification({
        type: "warning",
        message: err + ",请检查并填写正确企业地址",
      });
      baTable.form.items!.addr = "";
      baTable.form.items!.coordinate = "";
      baTable.form.items!.institution = 0;
    });
};

//获取域名进行拼接
const getBaseUrl = () => {
  let url = window.location;
  console.log("获取域名进行拼接", url.origin, url.origin.includes("s"));
  if (url.origin.includes("https")) {
    //https
    state.host = url.origin;
  } else {
    state.host = "";
  }
};
getBaseUrl();

onMounted(() => {
  //获取所有工序列表
  bomRoute.getRouteList().then((res: any) => {
    
  });
});
// defineExpose({
//   getCheckeds,
// });
// watch(filterText, (val) => {
//   treeRef2.value!.filter(val);
// });
// watch(filterTextIOT, (val) => {
//   treeRef3.value!.filter(val);
// });
</script>
<style lang="scss" scoped>
.filter-tree {
  height: 200px;
}
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
.vertical-menus-scrollbar {
  height: v-bind(overviewMenusScrollbarHeight);
}
</style>
